<!--
 * @FilePath: /lieshou-app/components/z-sub-tab.vue
-->

<template>
  <view class="task-card" v-for="(task, index) in taskList" :key="index">
    <!-- 课程信息 -->
    <view class="card-content">
      <view class="title">
        <text class="task-title">{{ task.title }}</text>
        <text class="progress-text">进度：{{ task.progress }}%</text>
      </view>

      <view class="info">
        <text class="task-info">{{ task.chapter }}</text>
        <text class="task-time">{{ task.currentTime }}/{{ task.totalTime }}</text>
      </view>

      <!-- 按钮操作 -->
      <view class="buttons">
        <uv-row justify="flex-end" gutter="10">
          <uv-col span="3" v-if="task.progress < 100">
            <div
              class="action-button continue"
              @click="continueStudy(task)"
            >
              <image class="icon" src="@/static/image/my/btn-bg-icon.png"></image>
              <text class="txt">写作业</text>
            </div>
          </uv-col>
          <uv-col span="3">
            <div
              class="action-button continue"
              @click="continueStudy(task)"
            >
              <image class="icon" src="@/static/image/my/btn-bg-icon.png"></image>
              <text class="txt">继续学习</text>
            </div>
          </uv-col>
        </uv-row>
      </view>

      <!-- 间隔 -->
      <view class="inter"></view>

      <!-- 状态标签 -->
      <view class="status">
        <image mode="aspectFill" class="icon" v-for="(status, i) in task.status" :src="`/static/image/my/${item.status ? 'active-' : ''}s-${i == 2 ? 'award' : i == 1 ? 'work' : 'class'}-icon.png`"></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      taskList: [
        {
          title: '《100天拓展有效联系人》',
          chapter: '第一章·第1节 社交软件拓展联系人',
          progress: 44,
          currentTime: '01:56:00',
          totalTime: '03:15:00',
          status: ['已学完', '已提交作业', '已解锁奖励'],
          canSubmit: false,
        },
        {
          title: '《100天拓展有效联系人》',
          chapter: '第一章·第1节 社交软件拓展联系人',
          progress: 100,
          currentTime: '03:15:00',
          totalTime: '03:15:00',
          status: [1, 0, 0],
          canSubmit: true,
        },
		{
          title: '《100天拓展有效联系人》',
          chapter: '第一章·第1节 社交软件拓展联系人',
          progress: 100,
          currentTime: '03:15:00',
          totalTime: '03:15:00',
          status: ['已学完', '已提交作业', '已解锁奖励'],
          canSubmit: true,
        },
      ],
    };
  },
  methods: {
    continueStudy(task) {
      console.log('继续学习', task.title);
    },
    restartStudy(task) {
      console.log('重新学习', task.title);
    },
    submitHomework(task) {
      console.log('提交作业', task.title);
    },
  },
};
</script>

<style lang="scss" scoped>
.task-card {
  background-color: #fff;
  border-radius: 20rpx;
  margin: 0px 28rpx 40rpx;
  padding: 18rpx 24rpx 16rpx 12rpx;
  box-shadow: 4rpx 4rpx 8rpx rgba(0, 0, 0, 0.25);
  &:first-of-type {
    margin-top: 16rpx;
  }

  .card-content {
    display: flex;
    flex-direction: column;
  }

  .title,
  .info {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .title {
    height: 42rpx;
    .task-title {
      font-size: 28rpx;
      color: rgba(43, 43, 43, 1);
    }
    .progress-text {
      font-size: 20rpx;
      color: rgba(0, 0, 0, 1);
    }
  }

  .info {
    height: 30rpx;
    margin-top: 20rpx;
    font-size: 20rpx;
    padding-left: 12rpx;
    .task-info {
      color: rgba(0, 0, 0, 1);
    }
    .task-time {
      color: rgba(64, 64, 64, 1);
    }
  }

  .buttons {
    margin-top: 16rpx;
    .action-button {
      height: 40rpx;
      width: 100%;
      line-height: 40rpx;
      font-size: 20rpx;
      position: relative;
      color: rgba(0, 0, 0, 1);
      .icon {
        width: 100%;
        height: 100%;
      }
      .txt {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
      }
    }
  }

  .inter {
    width: 652rpx;
    height: 2rpx;
    background-color: rgba(235, 235, 235, 1);
    margin: 12rpx auto 16rpx;
  }

  .status {
    padding-left: 12rpx;
    display: flex;
    .icon {
      height: 30rpx !important;
      max-width: 110rpx;
      margin-right: 16rpx;
    }
  }
}
</style>
